<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style: none;
	}
	a{
		text-decoration: none;
		color: #222222;
		font-size: 14px;
	}
	body{
		background: #F4F4F4 url() 0 0 no-repeat;
		font-family: 微软雅黑;
	}
	.header{
		width: 100%;
		height: 65px;
		background: #222222 url() 0 0 no-repeat;
	}
	.header .menu ul li{
		position: relative;
		float: left;
	}
	.header .menu ul li a{
		display: block;
		padding: 0 20px;
		color: #fff;
		font-size: 12px;
		line-height: 65px;
	}
	.header .menu ul li a:hover{
		background: #339DD2 url() 0 0 no-repeat;
	}
	.box{
		width: 900px;
		height: 800px;
		/*border: 1px solid #000;*/
		margin: 0 auto;
	}
	.bander{
		width: 100%;
		height: 465px;
		padding-top: 65px;
	}
	.logo{
		float: left;
		margin-right: 30px;
	}
	.menu{
		float: left;
	}
	.img{
		position: absolute;
		top:25px;
		left: 70px;
		z-index: 1;

	}
	.red{
		width: 20px;
		height: 20px;
		background: red url() 0 0 no-repeat;
		position: absolute;
		top:25px;
		left: 70px;
		z-index: 0;
	}
	</style>
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<!-- logo -->
		<div class="logo">
			<img src="./logo.png" alt="">
		</div>
		<!-- 菜单 -->
		<div class="menu">
			<ul>
				<li class = ''><a href="">首页</a></li>
				<li>
					<a href="">在线学习</a>
					<img class = 'img'src="./hot.gif" alt="">
					<div class="red"></div>
				</li>
				<li><a href="">VIP系统</a></li>
				<li><a href="">VIP服务</a></li>
			</ul>
		</div>
	</div>
	<div class='box'>
		<div class="bander">
			<img src="./bander.png" alt="">
		</div>
	</div>	
</body>
</html>